﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Selectable</title>
    <!-- Script -->
    <script src="script/jquery-1.3.2.js" type="text/javascript"></script>
    <script src="script/ui.core.js" type="text/javascript"></script>
    <script src="script/ui.selectable.js" type="text/javascript"></script>
    
    <style type="text/css">
	#feedback { font-size: 1.4em; }
	#selectable .ui-selecting { background: #FECA40; }
	#selectable .ui-selected { background: #F39814; color: white; }
	#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
	#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
	</style>
	<script type="text/javascript">
	    $(function() {
	        $("#selectable").selectable({
	            stop: function() {
	                var result = $("#select-result").empty();
	                $(".ui-selected", this).each(function() {
	                    var index = $("#selectable li").index(this);
	                    result.append(" #" + (index + 1));
	                });
	            }
	        });
	    });
	</script>
</head>
<body>
    <ol id="selectable">
        <li class="ui-widget-content">Item 1</li>
        <li class="ui-widget-content">Item 2</li>
        <li class="ui-widget-content">Item 3</li>
        <li class="ui-widget-content">Item 4</li>
        <li class="ui-widget-content">Item 5</li>
        <li class="ui-widget-content">Item 6</li>
        <li class="ui-widget-content">Item 7</li>
    </ol>

</body>
</html>
